<template>
  <div class="upload-approve">
    <el-row class="header" type="flex" justify="space-between">
      <div>
        <span class="header-title"
          >【ID{{ previewObj.id | capture }}】{{ previewObj.desc }}</span
        >
      </div>
    </el-row>
    <el-row :gutter="16" class="content">
      <el-col class="content-left" :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
        <el-card>
          <handler :pager="previewObj" :approvalType="approvalType" :processCode="processCode"/>
        </el-card>
      </el-col>
      <el-col class="content-right" :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
        <el-card>
          <div class="desc">基本信息</div>
          <el-form ref="form" label-width="80px" class="baseinfo">
            <el-form-item label="简介:">
              {{ previewObj.desc || "- -" }}
            </el-form-item>
            <el-form-item label="创建人:"> {{ previewObj.owner }}</el-form-item>
            <el-form-item label="处理人:">
              <el-tag>{{ name }}</el-tag>
            </el-form-item>
            <el-form-item label="创建时间:">
              {{ parseTime(previewObj.create_time) }}
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { 
  getUploadApprovalTaskInfo, 
  getHolidayApprovalTaskInfo, 
  getUseCarApprovalTaskInfo,
  getOfficeBuyApprovalTaskInfo
} from "@/api/work.js";
import { mapGetters } from "vuex";
import { parseTime } from "@/utils/index.js";
export default {
  name: "UploadApprovalPager",
  components: {
    Handler: () => import("./Handler.vue")
  },
  computed: {
    ...mapGetters(["name", "id"]),
  },
  data() {
    return {
      previewObj: {},
      taskid: null,
      approvalType: '',
      processCode: null
    };
  },
  created() {
    const { targetId, approvalType, variables, proDefId } = this.$route.params;
    this.taskid = targetId;
    this.processCode = proDefId.split(/\d+/)[0]
    this.approvalType = approvalType
    this.fetchData(targetId);
    // 如果是公务用车，获取procInstVar基础填信息
    if(approvalType === 'useCar') {
      const { fromData } = variables
      this.previewObj = fromData
    }
  },
  filters: { 
    // 过滤审批任务id内容
    capture(value = '') {
      if(value.length > 10) { 
        return value.split('-')[0]
      }
      return value
    },
  },
  methods: {
    parseTime,
    fetchData(taskid) {
      if(!taskid){
          this.$router.push({path: '/'})
          return
        }
      // 获取基础填信息
      if(this.approvalType === 'upload') {
        getUploadApprovalTaskInfo(taskid).then((res) => {
          this.previewObj = res.data;
        });
      } else if(this.approvalType === 'useCar') {
        getUseCarApprovalTaskInfo(taskid).then((res) => {
          this.previewObj = {
            desc: '公务用车审批',
            ...this.previewObj,
            ...res.data
          }
        });
      } else if(this.approvalType === 'officeBuy') {
        getOfficeBuyApprovalTaskInfo(taskid).then((res) => {
          this.previewObj = {
            desc: '办公用品采购审批',
            ...this.previewObj,
            ...res.data
          }
        });
      } else if(this.approvalType === 'leave') {
        getHolidayApprovalTaskInfo(taskid).then((res) => {
          const { type, ...reset } = res.data || {}
          this.previewObj = {
            desc: type + '审批',
            type,
            ...reset
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-approve {
  .header {
    padding: 10px 18px;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    align-items: baseline;
    .overdue-text {
      display: inline-block;
      height: 19px;
      line-height: 19px;
      vertical-align: text-top;
      font-size: 12px;
      color: #fff;
      background: #ff6060;
      border-radius: 4px;
      padding: 1px 3px;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .content {
    margin: 18px 12px!important;
    &-right {
      .desc {
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
  }
}
</style>